<template>
    <div class="info">
        <el-row>
            <el-col :span="3" style="text-align: right">
                <el-icon><CircleCheck /></el-icon>
            </el-col>
            <el-col :span="16" style="height: 104px;">
                <div style="line-height: 52px;">订单提交成功！去付款咯～</div>
                <div style="line-height: 52px;">请在30分内完成支付, 超时后将取消订单</div>
            </el-col>
            <el-col :span="5" style="height: 104px; line-height: 104px; text-align: right;">
                应付总额:<span class="total">￥ {{ order.payment}}</span>元
            </el-col>
        </el-row>
        <div>
            <el-collapse>
                <el-collapse-item title="订单详情" name="1">
                    <el-row>
                        <el-col :span="2">订单号:</el-col>
                        <el-col :span="10">{{order.orderNo}}</el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">收货信息：</el-col>
                        <el-col :span="10">{{order.addrDetail}}</el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">商品名称：</el-col>
                        <el-col :span="10">
                            <div v-for="(orderDetail, index) in order.orderDetails" :key="index">
                                {{orderDetail.goods.name}} {{orderDetail.goods.color}} {{orderDetail.goods.version}}
                            </div>
                        </el-col>
                    </el-row>
                </el-collapse-item>
            </el-collapse>
        </div>
    </div>
    <div class="pay">
        <div>
            <div class="title">支付工具</div>
            <ul>
                <li>余额支付</li>
                <li>支付宝支付</li>
                <li>微信支付</li>
                <li>银行卡支付</li>
            </ul>
        </div>
        <div>
            <el-input type="password" v-model="payPwd" placeholder="请输入支付密码" style="margin: 10px 10px; width: 200px;"></el-input>
            <el-button type="danger" size="large" @click="pay">支付</el-button>
        </div>
    </div>
</template>

<script setup>
import {useRoute} from "vue-router";
import {useRouter} from "vue-router";
import orderApi from "@/api/orderApi.js";
import {ElMessage} from "element-plus";
import {ref} from "vue";

const route = useRoute();
const router = useRouter();
//保存订单信息
const order = ref({});
//总金额
const total = ref(0);
//支付密码
const payPwd = ref("");

//根据订单ID查询相关信息
function getOrder() {
    //获取路径上的订单id
    const orderNo = route.query.orderNo;

    //根据订单Id查询相关信息 地址 商品
    orderApi.selectById(orderNo).then(resp => {
        order.value = resp.data;
    })
}

//支付
function pay() {
    orderApi.pay(route.query.orderNo).then(resp => {
        //跳转到用户的订单详情页
        router.push("/orderList");
    })
}

getOrder();
</script>

<style scoped>
    .info, .pay {
        margin-top: 30px;
        background-color: #FFF;
        padding: 30px;
    }

    .info .el-icon {
        font-size: 100px;
        color: #83C44EFF;
    }

    .info .total {
        font-size: 18px;
        font-weight: bold;
        color: var(--theme-color);
    }

    .pay .title {
        font-weight: bold;
        font-size: 18px;
    }

    .pay ul li {
        margin: 10px 10px;
        padding: 0px 10px;
        float: left;
        border: 2px solid #AAA;
        height: 40px;
        line-height: 40px;
    }
</style>
